<script setup lang="ts">
import {
  SITE_NAVS as siteNavs
} from '~/common/constants'
import {useSystemStore} from '~/store/system'
import {NO_NEED_LARGE_CONTAINER_ROUTES} from '~/common/constants';
import {onMounted} from '#imports'

const nuxtApp = useNuxtApp()
const systemStore = useSystemStore()

const containerClass = ref(['container', 'view-container'])

/**
 * 搜索框
 */
const searchFocus = ref(false)

/**
 * 路由对象
 */
const route = useRoute()

watch(route, async ({ fullPath }) => {
  const containerCls = containerClass.value
  if (typeof fullPath === 'string') {
    if (NO_NEED_LARGE_CONTAINER_ROUTES.indexOf(fullPath) > -1) {
      const index = containerCls.indexOf('large-container');
      if (index !== -1) {
        // 使用 splice() 方法删除元素
        containerCls.splice(index, 1);
      }
    } else {
      const index = containerCls.indexOf('large-container');
      if (index === -1) {
        // 使用 splice() 方法删除元素
        containerCls.push('large-container')
      }
    }
  }
}, {
  immediate: true
})

const userMenuOptions = [
  {
    key: 'userMenu',
    type: 'render',
    render: () => {
      return h('div', {
        class: 'more-list'
      },
      [
        h('ul', {
          class: 'menu'
        }, [
          h('li', {
            class: 'item',
            onClick:() => {
              const judgeRes = nuxtApp.$tokenExpireJudge(false)
              if (judgeRes) navigateTo('/article/new')
            }
          }, [
            h('div', {class: 'icon article'}),
            h('div', { class: 'title' }, { default: () => '写文章' })
          ]),
          h('li', {
            class: 'item',
            onClick:() => {
              const judgeRes = nuxtApp.$tokenExpireJudge(false)
              if (judgeRes) navigateTo('/drafts')
            }
          }, [
            h('div', {class: 'icon drafts'}),
            h('div', { class: 'title' }, { default: () => '草稿箱' })
          ]),
          h('li', {
            class: 'item',
            onClick:() => {
              const judgeRes = nuxtApp.$tokenExpireJudge(false)
              if (judgeRes) navigateTo('/res')
            }
          }, [
            h('div', {class: 'icon res'}),
            h('div', { class: 'title' }, { default: () => '传资源' })
          ])
        ])
      ])
    }
  }
]

// 显示移动端主菜单
const showMobileMenu = ref(false)
const navIndex = ref(0)
const switchMobileMenu = (e) => {
  e.stopPropagation()
  showMobileMenu.value = !showMobileMenu.value
}
const handleNavClick = (item: any, index: number, e) => {
  e.stopPropagation()
  systemStore.resetCategoryVars()
  navIndex.value = index
  showMobileMenu.value = false
}
onMounted(() => {
  window.addEventListener('resize',() => {
    showMobileMenu.value = false
  })
  document.body.addEventListener('click', () => {
    showMobileMenu.value = false
  })
  window.addEventListener('scroll', systemStore.onWindowScroll)
})
</script>

<template>
  <div :class="containerClass">
    <div class="main-header-box">
      <header :class="['main-header', {visible: systemStore.showMainNav}]" ref="mainNavRef">
        <!-- 顶部栏 start -->
        <div class="container-flex">
          <NuxtLink class="logo" to="/">
            <img src="~/assets/imgs/logo.svg" alt="夏目友人" class="logo-img">
            <i-ant-design-menu-outlined class="mobile"/>
          </NuxtLink>

          <nav role="navigation" class="main-nav">
            <ul class="nav-list">
              <li class="main-nav-list">
                <div class="phone-show-menu" @click="switchMobileMenu">
                  <span>{{siteNavs[navIndex].title}}</span>
                  <i-ep-caret-bottom width="12" height="12" :class="['unfold16-icon',{active: showMobileMenu}]"/>
                </div>
                <ul :class="['phone-hide',{show: showMobileMenu}]">
                  <li v-for="(item, index) in siteNavs" :key="index" :class="['nav-item', 'link-item', {'active': route.fullPath === item.path}]">
                    <NuxtLink :to="item.path" @click="handleNavClick(item, index, $event)">{{item.title}}</NuxtLink>
                  </li>
                </ul>
              </li>
              <ul class="right-side-nav">
                <li class="search-add">
                  <ul :class="['search-add-ul', {active: searchFocus}]">
                    <li :class="['nav-item','search',{active: searchFocus}]">
                      <form role="search" :class="['search-form', {active: searchFocus}]">
                        <input type="search" maxlength="64" placeholder="探索夏目友人" class="search-input" @focus="searchFocus = true"  @blur="searchFocus = false">
                        <div class="search-icon-container">
                          <i-ep-search/>
                        </div>
                      </form>
                    </li>
                    <ClientOnly>
                        <li :class="['nav-item', 'add', 'creator-item', {
                          hide: searchFocus
                        }]">
                          <div class="add-group">
                            <button :class="['add-btn', {
                              hide: searchFocus
                            }]">
                              创作者中心
                            </button>
                            <NDropdown trigger="hover" :options="userMenuOptions">
                              <div :class="['more', {
                                hide: searchFocus
                              }]">
                                <i-ep-caret-bottom width="12" height="12"/>
                              </div>
                            </NDropdown>
                          </div>
                        </li>
                    </ClientOnly>
                  </ul>
                </li>
                <li :class="['nav-item', 'auth', {hide: searchFocus}]">
                  <ClientOnly>
                    <LoginPopver></LoginPopver>
                  </ClientOnly>
                </li>
              </ul>
            </ul>
          </nav>
        </div>
        <!-- 顶部栏 end -->
      </header>
    </div>
    <slot/>
  </div>
  <GlobalComponentBox/>
</template>

<style lang="scss">
.main-header-box {
  position: relative;
  height: 60px;
  .main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: transform .2s;
    transform: translate3d(0,-100%,0);
    background: var(--tidy-navigation);
    box-shadow: 0 2px 8px var(--tidy-layer-3-fill);
    color: #909090;
    height: 60px;
    z-index: 250;
    &.visible {
      transform: translateZ(0);
    }
    .container-flex {
      margin: auto;
      max-width: 1440px;
      .main-nav {
        height: 100%;
        flex: 1 0 auto;
        line-height: normal;
        .nav-list {
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;
          flex-direction: row-reverse;
          height: 100%;
          margin: 0;
          .main-nav-list {
            display: flex;
            order: 99;
            .phone-hide {
              display: flex;
              &.show {
                .nav-item {
                  &.link-item {
                    &:hover {
                      background-color: var(--tidy-gray-3);
                    }
                  }
                }
              }
              .nav-item {
                &.link-item {
                  a:not(.no-hover) {
                    display: inline-block;
                    height: 60px;
                    padding: 0 12px;
                    line-height: 60px;
                    &:hover{
                      &:not(.no-border) {
                        &:before {
                            content: "";
                            position: absolute;
                            top: auto;
                            right: 0;
                            bottom: 0;
                            left: 12px;
                            height: 2px;
                            background-color: var(--tidy-font-brand1-normal);
                            width: calc(100% - 24px);
                        }
                      }
                    }
                  }
                }
                &.active {
                  & > a {
                    color: var(--tidy-font-brand1-normal);
                    font-weight: 500;
                  }
                }
              }
            }
          }
          .right-side-nav {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            position: relative;
            height: 100%;
            margin: 0;
            order: 0;
            .search-add {
              flex: 1 1 auto;
              height: 60px;
              display: flex;
              justify-content: flex-end;
            }
          }
        }
      }
    }
  }
}
</style>
